<template>
	<view class="content">
		<view class="myCars" v-if="list.length > 0">
			<view class="my-car-item box" v-for="(item, i) in list" :key='i'>
				<car-item class="carInfo" :cartInfo='item'></car-item>
				<view class="btns">
					<view class="setting btn" @click="settingDefault(item)">
						<image class="icon-image" :src="$getImageSrc(item.showable?'quanSelect.png':'quan.png')" mode=""></image>
						<view class="tip">设为默认车辆</view>
					</view>
					<view class="action btn">
						<view class="del" @click="delCart(item.id)">
							<image class="icon-image" :src="$getImageSrc('mine_ic_de.png')" mode=""></image>
							<text>删除</text>
						</view>
						<view class="editor" @click="updateCart(item)">
							<image class="icon-image" :src="$getImageSrc('mine_ic_xg.png')" mode=""></image>
							<text>修改</text>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 120rpx;">
			</view>
		</view>
		<no-list tipInfo="您还没有添加你的车辆信息" v-else></no-list>
		<footer-button type="default" @clickFooter="goAddCarts" btnTip='添加车辆'></footer-button> 
		<uni-popup ref="carPopup" :mask-click="false">
			 <view class="popup-content">
				<view class="popup-title">温馨提示</view>
				<view class="popup-tip-info">
					确认删除车辆信息吗？
				</view>
				<view class="popup-btns">
					<button class="btn " type="default" @click="srueDelCart">确认删除</button>
					<button class="btn btn1" @click="close" type="primary">暂不删除</button>
					
				</view>
			 </view>
		</uni-popup>
	</view>
</template>

<script>
	import {myCart, carDel, editCart, showable} from "@/untils/api"
	export default {
		data() {
			return {
				list:[],
				currCartId:''
			}
		},
		created(){
         this.getMyCarts()
		},
		methods: {
		  close(){
			this.$refs.carPopup.close()  
		  },
		  delCart(id){
			  this.currCartId = id
			  this.$refs.carPopup.open()
		  },
		  srueDelCart(){
			  carDel({id:this.currCartId}).then((res) => {
				  if(res.code - 200 === 0){
					  uni.showToast({
					  	icon:'success',
					  	title: '删除成功',
					  	duration: 3000,
					  	complete:() => {
							this.close()
							this.getMyCarts()
					  	}
					  }); 
				  }
			  })
		  },
		  updateCart(item){
			  this.currCartId = item.id
			  uni.navigateTo({
				  url:`/subpackage/mine/addCar?id=${item.id}&licensePlate=${item.licensePlate}&cartColor=${item.cartColor}&cartImg=${item.cartImg}&cartType=${item.cartType}&showable=${item.showable}`,
			  })
			  
		  },
		  settingDefault(item){
			 this.currCartId = item.id
			 if(item.showable){
				 item.showable = false
				editCart(item).then((res) => {
					this.getMyCarts()
				})
			 }else{
                showable({id:item.id}).then((res) => {
					this.getMyCarts()
				})
			 }
		  },
		  goAddCarts(){
			  uni.navigateTo({
				  url:'/subpackage/mine/addCar'
			  })
		  },
		  getMyCarts(){
			  myCart().then((res) => {
				  this.list = res.data
				  this.$setStorageSync('cartlist', res.data)
			  })
		  },
		}
	}
</script>

<style lang="scss" scoped>
 .content{
	 height: 100%;
	 background: #eee;
	 overflow: hidden;
	 .myCars{
		 height: 100%;
		 width: 100%;
		 padding-top: 30rpx;
		 overflow: auto;
	 }
	 .my-car-item{
		 border-radius: 40rpx;
		 margin-bottom: 30rpx;
		 .carInfo{
			 margin-bottom: 20rpx;
			 box-sizing: border-box;
		 }
		 .btns{
			 height: 80rpx;
			 line-height: 80rpx;
			 width: 90%;
			 margin: 0 auto;
			 display: flex;
			 justify-content: space-between;
			 align-items: center;
			 font-size: 28rpx;
			 border-top: 1px solid #eee;
			 .btn{
				display: flex;
				justify-content: space-between;
				align-items: center; 
			 }
			 .setting{
				 width: 200rpx;
			 }
			 .action{
				 width: 200rpx;
				 image{
					 margin-right: 10rpx;
				 }
				 view{
					 display: flex;
					 justify-content: space-around;
					 align-items: center;
				 }
			 }
		 }
		 .icon-image{
			 width: 30rpx;
			 height: 30rpx;
		 }
	 }
	 .addCar{
		 position: absolute;
		 bottom: 20rpx;
		 left: 32rpx;
		 width: 688rpx;
		 height: 88rpx;
		 background: linear-gradient( 225deg, #8AF3B3 0%, #02B1AA 100%);
		 box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(2,177,170,0.3);
		 border-radius: 16rpx 16rpx 16rpx 16rpx;
		 font-size: 38rpx;
		 color: #fff;
	 }
	 .popup-content{
	 	width: 550rpx;
	 	height: 300rpx;
	 	padding: 40rpx;
	 	background:#fff;
	 	border-radius: 10rpx;
	 	font-size: 24rpx;
	 	text-align: center;
	 	padding-top: 80rpx;
	 	background: #fff linear-gradient( 180deg, rgba(2,177,170,0.12) 0%, rgba(0,214,142,0) 20%);
	 	border-radius: 16rpx 16rpx 16rpx 16rpx;
	 	.popup-title{
	 		font-size: 32rpx;
	 		font-weight: 600;
	 		line-height: 40rpx;
	 	}
	 	.popup-tip-info{
	 		line-height: 180rpx;
	 	}
	 	.popup-btns{
	 		width: 500rpx;
	 		margin: 0 auto;
			display: flex;
	 		.btn{
	 			height: 80rpx;
	 			line-height: 80rpx;
	 			font-size: 26rpx;
	 			margin-bottom: 30rpx;
				width: 200rpx;
	 		}
	 		.btn1{
	 			background: #02B1AA;
	 		}
	 	}
	 }
 }
</style>
